import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import InvoiceType from '@/components/invoiceType';
import XforcePagination from '@xforceplus/pagination';
import { AuthCode, AuthCodeContext } from '@xforceplus/authcode';
import { Tabs, Pagination } from 'antd';
import { getParcel, getParcelDetailById } from '../../module/action';
//------------------------------------------------
import SendInDetail from './SendInDetail';
import SendModule from '../SendModule';
import Opetation from '../Opetation';
import Footers from '../Footers'
//------------------------------------------------
import '../send.scss';
const TabPane = Tabs.TabPane;


class SendIn extends Component {
  state = {
    pageSizeOptions: ['10', '20', '50', '100', '200'],// 指定每页可以显示多少条
    visibleDetail: false,
    detailData: null,
    sender: null,
    currentPage: 1, // 当前页
    defaultPageSize: 10, // 默认的每页条数, 默认值 10
  }

  detailHandler = (data, sender) => {
    // console.log(`sender=========>`, data, sender)
    this.props.getParcelDetailById(data.id)
    this.setState({
      visibleDetail: true,
      detailData: data,
      sender: sender,
    })
  }

  detailBack = () => {
    this.setState({
      visibleDetail: false
    })
  }

  switchTabPane = (statusSwitch) => {
    const { logisticsRequestParam, orderParam, pageParam, changeParcelStatus, parcelStatus } = this.props
    const { currentPage, defaultPageSize, status } = this.state
    const param = logisticsRequestParam
    param.businessLgtStatus = parcelStatus.businessLgtStatus//包裹状态(3-寄送中，4-异常，5-已签收)
    switch (statusSwitch) {
      case '1':
        changeParcelStatus(1, 3)
        param.parcelFlag = 1//parcelStatus.parcelFlag
        this.props.getParcel({
          logisticsParcelRequestParam: param,
          orderParam: orderParam,
          pageParam: {
            pageIndex: currentPage,
            pageRowCount: defaultPageSize
          }
        })
        break;
      case '2':
        changeParcelStatus(2, 3)
        param.parcelFlag = 2//parcelStatus.parcelFlag
        this.props.getParcel({
          logisticsParcelRequestParam: param,
          orderParam: orderParam,
          pageParam: {
            pageIndex: currentPage,
            pageRowCount: defaultPageSize
          }
        })
        break;
    }
  }

  // 翻页操作 page 跳转到的页数，pageSize 切换每页展示数量
  paginationChange = (page, pageSize) => {
    const { orderParam, logisticsRequestParam } = this.props
    this.props.getParcel({
      logisticsParcelRequestParam: logisticsRequestParam,
      orderParam: orderParam,//排序方式
      pageParam: {
        pageIndex: page,//第几页
        pageRowCount: pageSize,//一页多少条
      }
    })
    this.setState({
      currentPage: page,
      defaultPageSize: pageSize
    })
  }
  onChange = (page) => {
    const { orderParam, logisticsRequestParam } = this.props
    const { defaultPageSize } = this.state
    this.props.getParcel({
      logisticsParcelRequestParam: logisticsRequestParam,
      orderParam: orderParam,//排序方式
      pageParam: {
        pageIndex: page,//第几页
        pageRowCount: defaultPageSize,//一页多少条
      }
    })
    this.setState({
      currentPage: page,
      defaultPageSize: defaultPageSize,
      visibleDetail: false
    })
  }

  render() {
    const { visibleDetail, detailData, sender, pageSizeOptions, currentPage, defaultPageSize } = this.state
    const {
      parcel,//包裹总数
      countParcel,//总数
      parcelStatus,
      userReSource
    } = this.props;
    const pageParam = {
      pageIndex: currentPage,
      pageRowCount: defaultPageSize
    }
    const total = parseInt(countParcel.sendingNum)
    const btmRight = <Pagination
      showQuickJumper
      showSizeChanger
      total={total ? total : 0}
      currentPage={currentPage}
      defaultPageSize={defaultPageSize}
      pageSizeOptions={pageSizeOptions}
      onShowSizeChange={this.paginationChange}
      onChange={this.onChange} />
    return (
      <React.Fragment>
        {visibleDetail ? <SendInDetail className="parcel-detail" onClose={this.detailBack} pageParam={pageParam} sender={sender} detail={detailData} /> :
          <React.Fragment>
            <Opetation status={parcelStatus} pageParam={pageParam} />
            <div className="send-tabs">
              <Tabs defaultActiveKey="1" activeKey={parcelStatus.parcelFlag === 1 ? "1" : "2"} onChange={this.switchTabPane}>
                <TabPane tab="寄件方" key="1"><SendModule className="parcelTable" detail={this.detailHandler} parcelStatus={parcelStatus} sender={true} dataSource={parcel} /></TabPane>
                <TabPane tab="收件方" key="2"><SendModule detail={this.detailHandler} sender={false} dataSource={parcel} /></TabPane>
                {/* <AuthCodeContext.Provider value={{ "authCodes": userReSource }}>
                  <AuthCode auth_code={'X00502001'}>
                    <TabPane tab="寄件方" key="1">
                      <SendModule className="parcelTable" detail={this.detailHandler} parcelStatus={parcelStatus} sender={true} dataSource={parcel} />
                    </TabPane>
                  </AuthCode>
                  <AuthCode auth_code={'X00502002'}>
                    <TabPane tab="收件方" key="2">
                      <SendModule detail={this.detailHandler} sender={false} dataSource={parcel} />
                    </TabPane>
                  </AuthCode>
                </AuthCodeContext.Provider> */}
              </Tabs>
              <Footers btmLeft={""} btmRight={btmRight} />
            </div>
          </React.Fragment>}
      </React.Fragment>
    );
  }
};

function mapStateToProps(state) {
  const { countParcel, parcel, orderParam, logisticsRequestParam, userReSource } = state.logistics;
  return {
    countParcel,//总数
    parcel,//包裹总数
    orderParam,//排序参数
    logisticsRequestParam,//筛选器对象
    userReSource,//用户资源码
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    getParcelDetailById,
    getParcel,//寄送中，异常，已签收 包裹总数
  }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(SendIn);
